<!DOCTYPE html>
<html>
  <!-- 
  To see the demo, start a web server and load this page.
  Use async/await to load fonts dynamically.
  For example:
    await Vex.Flow.fetchMusicFont('Bravura');
    Vex.Flow.setMusicFont('Bravura');
  Open the developer console to verify that ONLY vexflow-core.js is loaded when this page is first shown.
  -->
  <head>
    <meta charset="UTF-8" />
    <style>
      html {
        font: 16px 'Helvetica Neue', Arial, sans-serif;
      }
      body {
        margin: 20px;
      }
      #output {
        min-height: 220px;
        background-color: #fbfbf0;
        margin-top: 20px;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <p>
      To see the demo, start a web server and load this page (e.g., `npx http-server` and navigate to
      <a href="http://127.0.0.1:8080/demos/fonts/core.html">http://127.0.0.1:8080/demos/fonts/core.html</a>).
    </p>
    <p>
      Using <b>vexflow-core.js</b> allows your webpage to load a small initial bundle. It will load fonts on demand when
      you call <code>await Vex.Flow.fetchMusicFont(fontName)</code>.
    </p>
    <p>
      Open your browser's developer tools and choose one of the fonts below. You will see that a font module is
      downloaded when needed:
    </p>
    <div>
      <a href="#" onclick="chooseFont('Bravura')">Bravura</a> &nbsp;
      <a href="#" onclick="chooseFont('Leland')">Leland</a> &nbsp;
      <a href="#" onclick="chooseFont('Gonville')">Gonville</a> &nbsp;
      <a href="#" onclick="chooseFont('Petaluma')">Petaluma</a> &nbsp;
    </div>
    <div id="output"></div>
    <p>
      <a href="core-with-promise.html">See: core-with-promise.html</a> if you prefer to use Promises instead of
      await.<br />
      <a href="all.html">See: all.html</a>
    </p>
    <!--
      The vexflow-core.js build includes no music fonts.
      Do the following to load a font dynamically:
          await Vex.Flow.fetchMusicFont(fontName);
          Vex.Flow.setMusicFont(fontName);
    -->
    <script src="../../build/cjs/vexflow-core.js"></script>
    <script type="module">
      async function chooseFont(fontName) {
        const container = document.getElementById('output');
        while (container.firstChild) {
          container.removeChild(container.firstChild);
        }

        await Vex.Flow.fetchMusicFont(fontName);
        Vex.Flow.setMusicFont(fontName);

        renderScore();
      }

      function renderScore() {
        const factory = new Vex.Flow.Factory({ renderer: { elementId: 'output', width: 500, height: 200 } });
        const score = factory.EasyScore();
        const system = factory.System();
        system
          .addStave({
            voices: [
              score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
              score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
            ],
          })
          .addClef('treble')
          .addTimeSignature('4/4');
        factory.draw();
      }
      window.chooseFont = chooseFont;
    </script>
  </body>
</html>
